<template>
  <div class="_wrapper _p10 _flex-y">
    <div class="_flex _cart _flex-space-x">
      <el-input v-model="ws_server" placeholder="服务地址"></el-input>
      <el-input v-model="rstp_url" placeholder="请输入rstp流地址"></el-input>
      <el-button type="primary" @click="play()">播放</el-button>
    </div>
    <div class="_flex-item-1 _wrapper-x _cart _m-t-5 _over-hidden">
      <canvas
        ref="jsmpeg"
        id="canvas-1"
        class="_wrapper _background-1"
      ></canvas>
    </div>
  </div>
</template>
<script>
import toolLoadJs from "@/tool/tool-load-js";
import { getStreamUrl } from "./components/ApiHaikang.js";

export default {
  data() {
    return {
      rstp_url: "",
      ws_server: "ws://127.0.0.1:9999",
    };
  },
  mounted() {
    toolLoadJs.loadJS("https://jsmpeg.com/jsmpeg.min.js").then(() => {});
  },
  methods: {
    async play() {
      this.rstp_url = (await getStreamUrl(this.param("comCode"))).url;
      // eslint-disable-next-line no-undef
      new JSMpeg.Player(`${this.ws_server}/rtsp?url=${btoa(this.rstp_url)}`, {
        canvas: this.$refs.jsmpeg,
      });
    },
  },
};
</script>
<style lang=""></style>
